import React from "react";
import * as ST from "./styled";
import { TextEnum } from "../../UI_KIT/Atoms/Text/enum";
import Text from "../../UI_KIT/Atoms/Text";
import Button from "../../UI_KIT/Atoms/Button";
import { ButtonEnum } from "../../UI_KIT/Atoms/Button/enum";
import { socialData } from "./const";

interface FooterProps {}

const Footer: React.FC<FooterProps> = () => {
  return (
    <ST.Container>
      <ST.Block>
        <ST.Logo>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="65"
            height="65"
            viewBox="0 0 65 65"
            fill="none"
          >
            <path
              d="M57.5514 44.3083C55.1681 44.3083 54.1118 43.3874 52.6222 42.0874C50.9702 40.6791 48.9119 38.8916 45.0389 38.8916C41.1389 38.8916 39.1076 40.6791 37.4556 42.0874C35.966 43.3874 34.8827 44.3083 32.4993 44.3083C30.1431 44.3083 29.0597 43.3874 27.5702 42.0874C25.9181 40.6791 23.8598 38.8916 19.9869 38.8916C16.0869 38.8916 14.0285 40.6791 12.3765 42.0874C10.8869 43.3874 9.8306 44.3083 7.44727 44.3083C6.33685 44.3083 5.41602 45.2291 5.41602 46.3395C5.41602 47.477 6.33685 48.3708 7.44727 48.3708C11.3473 48.3708 13.3785 46.6104 15.0306 45.1749C16.5201 43.8749 17.6035 42.9541 19.9869 42.9541C22.3702 42.9541 23.4265 43.8749 24.916 45.1749C26.5681 46.6104 28.6264 48.3708 32.4993 48.3708C36.3993 48.3708 38.4577 46.6104 40.1098 45.1749C41.5993 43.8749 42.6556 42.9541 45.0389 42.9541C47.3952 42.9541 48.4785 43.8749 49.9681 45.1749C51.6202 46.6104 53.6785 48.3708 57.5514 48.3708C58.6618 48.3708 59.5827 47.477 59.5827 46.3395C59.5827 45.2291 58.6618 44.3083 57.5514 44.3083Z"
              fill="white"
            />
            <path
              d="M57.5514 33.1501C55.1681 33.1501 54.1118 32.2021 52.6222 30.9292C50.9702 29.4938 48.9119 27.7334 45.0389 27.7334C41.1389 27.7334 39.1076 29.4938 37.4556 30.9292C35.966 32.2021 34.8827 33.1501 32.4993 33.1501C30.1431 33.1501 29.0597 32.2021 27.5702 30.9292C25.9181 29.4938 23.8598 27.7334 19.9869 27.7334C16.0869 27.7334 14.0285 29.4938 12.3765 30.9292C10.8869 32.2021 9.8306 33.1501 7.44727 33.1501C6.33685 33.1501 5.41602 34.0438 5.41602 35.1813C5.41602 36.2917 6.33685 37.2126 7.44727 37.2126C11.3473 37.2126 13.3785 35.4251 15.0306 33.9896C16.5201 32.7167 17.6035 31.7959 19.9869 31.7959C22.3702 31.7959 23.4265 32.7167 24.916 33.9896C26.5681 35.4251 28.6264 37.2126 32.4993 37.2126C36.3993 37.2126 38.4577 35.4251 40.1098 33.9896C41.5993 32.7167 42.6556 31.7959 45.0389 31.7959C47.3952 31.7959 48.4785 32.7167 49.9681 33.9896C51.6202 35.4251 53.6785 37.2126 57.5514 37.2126C58.6618 37.2126 59.5827 36.2917 59.5827 35.1813C59.5827 34.0438 58.6618 33.1501 57.5514 33.1501Z"
              fill="white"
            />
            <path
              d="M7.44727 26.1091C11.3473 26.1091 13.3785 24.3216 15.0306 22.9132C16.5201 21.6132 17.6035 20.6924 19.9869 20.6924C22.3702 20.6924 23.4265 21.6132 24.916 22.9132C26.5681 24.3216 28.6264 26.1091 32.4993 26.1091C36.3993 26.1091 38.4577 24.3216 40.1098 22.9132C41.5993 21.6132 42.6556 20.6924 45.0389 20.6924C47.3952 20.6924 48.4785 21.6132 49.9681 22.9132C51.6202 24.3216 53.6785 26.1091 57.5514 26.1091C58.6618 26.1091 59.5827 25.1882 59.5827 24.0778C59.5827 22.9403 58.6618 22.0466 57.5514 22.0466C55.1681 22.0466 54.1118 21.1257 52.6222 19.8257C50.9702 18.3903 48.9119 16.6299 45.0389 16.6299C41.1389 16.6299 39.1076 18.3903 37.4556 19.8257C35.966 21.1257 34.8827 22.0466 32.4993 22.0466C30.1431 22.0466 29.0597 21.1257 27.5702 19.8257C25.9181 18.3903 23.8598 16.6299 19.9869 16.6299C16.0869 16.6299 14.0285 18.3903 12.3765 19.8257C10.8869 21.1257 9.8306 22.0466 7.44727 22.0466C6.33685 22.0466 5.41602 22.9403 5.41602 24.0778C5.41602 25.1882 6.33685 26.1091 7.44727 26.1091Z"
              fill="white"
            />
          </svg>
          <Text type={TextEnum.enum_H4Text} children="DiveSea" />
        </ST.Logo>
        <ST.LinkBlock>
          <Text type={TextEnum.enum_aText} children="Privacy Policy" />
          <Text type={TextEnum.enum_aText} children="Term & Conditions" />
          <Text type={TextEnum.enum_aText} children="About Us" />
          <Text type={TextEnum.enum_aText} children="Contact" />
        </ST.LinkBlock>
      </ST.Block>
      <ST.SubBlock>
        <Text type={TextEnum.enum_H6Text} children="© 2023 EATLY All Rights Reserved." />
        <ST.FooterLink>
          {socialData.map((e) => (
            <Button
              type={ButtonEnum.enum_svgImage}
              children={e.url}
              key={`socialDataFooter${e.id}`}
            />
          ))}
        </ST.FooterLink>
      </ST.SubBlock>
    </ST.Container>
  );
};
export default Footer;
